require.config({
    baseUrl: "./modules",
    paths: {
        jq: "../libs/jquery"
    }
})

require(["jq", "getGoods", "renderShopping", "setCartLocal", "allFlag", "allNum", "allPrice"], function (_, getGoods, renderShopping, setCartLocal, allFlag, allNum, allPrice) {
    // console.log($);
    // console.log(getGoods)
    // 1. 请求 本地存储 数据
    const goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];

    // goodsMsg("http//3000/api?ytpe=getGoods").then((res)=>{
    // })

    getGoods((res) => {
        // console.log(res)
        // console.log(goodsMsg)
        // 3. 渲染页面
        renderShopping(res, goodsMsg, $(".goods-cont"));
        // 不使用事件委托，直接选择元素绑定事件
    })
    // 2. 请求商品数据
    // 4. 修改数据 - 事件委托绑定事件
    $(".goods-cont").on("input", ".setNum", function () {
        console.log($(this).val())
        const id = $(this).parent().parent().parent().attr("index");
        // 修改数量
        setCartLocal(goodsMsg, id, i => {
            goodsMsg[i].num = Number($(this).val());
        })

        // 11. 计算本地数据中每个商品的数量的累加
        $(".allNum").html(allNum(goodsMsg));
        // 16. 计算本地数据中每个商品的数量*价格的累加
        $(".allPrice").html(allPrice(goodsMsg));
    })
    // 5. 删除数据 - 事件委托删除按钮事件
    $(".goods-cont").on("click", ".del", function () {
        $(this).parent().parent().remove();
        const id = $(this).parent().parent().attr("index");
        // 删除数据
        setCartLocal(goodsMsg, id, i => {
            goodsMsg.splice(i, 1);
        })

        // 12. 计算本地数据中每个商品的数量的累加
        $(".allNum").html(allNum(goodsMsg));
        // 17. 计算本地数据中每个商品的数量*价格的累加
        $(".allPrice").html(allPrice(goodsMsg));
    })
    // 6. 记录单个商品的选中状态 - 事件委托复选框的改变事件
    $(".goods-cont").on("input", ".checks", function () {
        const id = $(this).parent().parent().attr("index");
        // console.log(this.checked)
        // 修改数据
        setCartLocal(goodsMsg, id, i => {
            goodsMsg[i].flag = Number(this.checked);
        })

        // 8. 每次修改单个商品的选中状态，都要
        // 判断每个商品的选中状态，如果全部选中，那么勾选全选，只要有一个没有选中，取消全选
        $("#allFlag")[0].checked = goodsMsg.every(val => val.flag);

        // 13. 计算本地数据中每个商品的数量的累加
        $(".allNum").html(allNum(goodsMsg));
        // // 18. 计算本地数据中每个商品的数量*价格的累加
        $(".allPrice").html(allPrice(goodsMsg));
    })

    // 7. 初始页面打开，立即
    // 判断每个商品的选中状态，如果全部选中，那么勾选全选，只要有一个没有选中，取消全选
    $("#allFlag")[0].checked = goodsMsg.every(val => val.flag);

    // 9. 全选的选中状态
    $("#allFlag").on("input", function () {
        // console.log(this.checked)
        allFlag(goodsMsg, this.checked);

        // 14. 计算本地数据中每个商品的数量的累加
        $(".allNum").html(allNum(goodsMsg));
        // // 19. 计算本地数据中每个商品的数量*价格的累加
        $(".allPrice").html(allPrice(goodsMsg));
    })

    // 10. 初始页面打开，立即
    // 计算本地数据中每个商品的数量的累加
    $(".allNum").html(allNum(goodsMsg));


    // 15. 初始页面打开，立即
    // 计算本地数据中每个商品的数量*价格的累加
    $(".allPrice").html(allPrice(goodsMsg));

})



